import React from 'react';

/* 样式 */
import styles from './Login.module.scss';

/* 引入antd */
import { Form, Input, Button, Checkbox } from 'antd';

/* 引入icon图标 */
import { UserOutlined, LockOutlined } from '@ant-design/icons';

/* 引入上下文 */
import useStore from '../../context/useStore';

/* 从React Router v5.1.0开始，新增了useHistory钩子（hook），如果是使用React >16.8.0，编写以下函数组件，使用useHistory即可实现编程时页面跳转导航。 */
import { useHistory } from 'react-router-dom';


export default function Login() {
    /* 使用钩子 */
    const history = useHistory();
    const { user } = useStore();
    const [form] = Form.useForm();

    const onFinish = async (values: any) => {
        /*  console.log('Success:', values); */

        /* 点击登录，发送请求 */
        let result=await user.loginAction(values.user_name, values.user_pwd);

        if(result){
            let qs:{[key:string]:string}={};
            history.location.search.slice(1).split('&').forEach(item=>{
                let arrs = item.split('=');
                qs[arrs[0]] = arrs[1];
            });
            /* decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。 */
            history.replace(qs.redirect? decodeURIComponent(qs.redirect): '/');
        }
    };

    return (
        <div className={styles.login_box}>
            <div className={styles.login}>
                {/* initialValues  是默认值
                name:表单名字
                onFinish:表单提交失败触发的回调
            */}
                <div className={styles.title}>登录</div>
                <Form
                    form={form}
                    name="normal_login"
                    initialValues={{ remember: false }}
                    onFinish={onFinish}
                >
                    {/* name:源生属性
                    rules:表单校验规则,
                    pattern:正则校验
                    validateTrigger:设置字段校验的时机
                */}
                    <Form.Item
                        name="user_name"
                        rules={[{ pattern: /^[a-z]{4,16}$/,required:true, message: '用户名由4-16位的大小写字母组成!' }]}
                    >
                        <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
                    </Form.Item>

                    <Form.Item
                        name="user_pwd"
                        validateTrigger="onBlur"
                        rules={[{ pattern: /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[#@*!&.]).*$/, message: '密码由大小写字母、数字、特殊字符组成!' , required: true}]}
                    >
                        <Input.Password prefix={<LockOutlined />} placeholder="请输入密码" />
                    </Form.Item>
                    <Form.Item>
                        <div className={styles.ant_form_item_control_input_content}>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住密码</Checkbox>
                            </Form.Item>

                            <a className={styles.login_form_forgot} href="/">
                                忘记密码
                            </a>
                        </div>
                    </Form.Item>

                    <Form.Item>
                        {/* htmlType="submit" 是form表单的提交 */}
                        <Button type="primary" htmlType="submit">
                            登录
                    </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}